import { Space, Table, Tag, Button, Spin, Image } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import http from '@/utils/request/index';
import { history } from 'umi';
const columns: any = [
  {
    title: '活动名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },

  {
    title: '图片链接',
    dataIndex: 'photo',
    key: 'photo',
    render: (a, b) => {
      console.log(a, b, 'abc');

      return (
        <a href={a} target="_blank">
          图片链接
        </a>
      );
    },
  },
  {
    title: '图片',
    dataIndex: 'photo',
    key: 'photo',
    render: (a, b) => {
      return (
        <Image src={a} width={200} height={100}>
          图片链接
        </Image>
      );
    },
  },

  {
    title: '操作',
    render: (text, record, c) => {
      return (
        <>
          <Button type="primary" danger>
            删除
          </Button>
          <Button
            type="primary"
            onClick={() => {
              history.push({
                pathname: '/carousel/edit',
                query: record,
              });
              console.log(record, '@@12');
            }}
            style={{ marginLeft: '20px' }}
          >
            编辑
          </Button>
        </>
      );
    },
  },
];

const App: React.FC = () => {
  let [stulist, setStulist] = useState([]);
  let [loading, setLoading] = useState(true);

  useEffect(() => {
    const getList = () => {
      setLoading(true);
      http({ url: '/carouselpublish', method: 'get' }).then((res: object) => {
        console.log(res, 'res');

        setStulist(res.data);
        setLoading(false);
      });
    };
    getList();
    return () => {};
  }, []);
  return (
    <Spin tip="加载中...." spinning={loading}>
      <Table columns={columns} dataSource={stulist} />
    </Spin>
  );
};

export default App;
